{% extends "base.html" %}

{% block title %}用户管理 - 项目管理系统{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header card-header-flex">
    <h5>用户管理</h5>
    <a href="{{ url_for('user_edit') }}" class="btn btn-primary">
      <i class="fas fa-user-plus"></i> 新建用户
    </a>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th style="width: 60px;">ID</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>状态</th>
            <th>最后登录</th>
            <th style="width: 150px;" class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
          <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.real_name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.phone }}</td>
            <td>
              {% if user.status == 1 %}
              <span class="badge badge-success status-badge">活跃</span>
              {% else %}
              <span class="badge badge-secondary status-badge">禁用</span>
              {% endif %}
            </td>
            <td>{{ user.last_login_time }}</td>
            <td class="text-center">
              <div class="btn-action-group">
                <a href="{{ url_for('user_edit', user_id=user.id) }}" class="btn btn-sm btn-warning">
                  <i class="fas fa-edit"></i><span class="btn-text">编辑</span>
                </a>
                <form action="{{ url_for('user_delete', user_id=user.id) }}" method="post" class="inline-form">
                  <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i><span class="btn-text">删除</span>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    {% if not users %}
    <div class="alert alert-info">
      暂无用户数据
    </div>
    {% endif %}
  </div>
</div>

<style>
  /* 确保操作按钮在同一行 */
  .btn-action-group {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  
  .inline-form {
    margin-left: 2px;
    display: inline-block;
  }
  
  .btn-action-group .btn {
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
  }
  
  .btn-text {
    margin-left: 3px;
    white-space: nowrap;
  }
</style>
{% endblock %} 